<template>
  <transition
    enter-active-class="fadeInDown"
    leave-active-class="fadeOutUp"
  >
    <div class="detailheader" v-show="isTop">
      <router-link tag="div" to="/" class="detaill-header-item">
        <img class="am-header-icon-custom" src="/static/icon/home.png">
        <span class="am-header-icon-span">返回首页</span>
      </router-link>
      <div class="titlebar-container-menu-primary-divider">
        <img class="title-divider-img" src="/static/img/line_nobg.png">
      </div>
      <router-link tag="div" to="/type" class="detaill-header-item">
        <img class="am-header-icon-custom" src="/static/icon/type.png">
        <span class="am-header-icon-span">分类</span>
      </router-link>
      <div class="titlebar-container-menu-primary-divider">
        <img class="title-divider-img" src="/static/img/line_nobg.png">
      </div>
      <router-link tag="div" to="/user" class="detaill-header-item">
        <img class="am-header-icon-custom" src="/static/icon/user.png">
        <span class="am-header-icon-span">个人中心</span>
      </router-link>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'DetailHeader',
  props: {
    isTop: Boolean
  }
}
</script>

<style lang="stylus" scoped>
  .detailheader
    position: fixed
    top: 0
    left: 0
    z-index: 500
    width: 100%
    height: .72rem
    line-height: .72rem
    overflow: hidden
    border-bottom: .02rem solid #d1d1d1
    background-color: white
    .detaill-header-item
      width: 29%
      line-height: .68rem
      height: 100%
      float: left
      background: white
      text-align: center
      .am-header-icon-custom
        width: .58rem
        vertical-align: middle
      .am-header-icon-span
        font-size: .28rem
        margin-left: .04rem
        vertical-align: middle
        color: #555
    .titlebar-container-menu-primary-divider
      width: .3rem
      background: white
      float: left
      .title-divider-img
        width: .3rem
        height: .8rem
</style>
